<template>

  <van-sticky>
    <div class="L-home-top-row">
      <van-row :gutter="10" type="flex" align="center" class="L-home-top-row">
        <van-col :span="3">
          <i class="iconfont icon-dongtaitiaojian" @click="showConditionPopup=true"></i>
        </van-col>
        <van-col :span="18" class="L-text-align-center">
          <span class="L-text">{{ currentTitle }}</span>
        </van-col>
        <van-col :span="3" @click="showActionSheet = true">
          <i class="iconfont icon-zhankai1"></i>
        </van-col>
      </van-row>
      <!-- <van-action-sheet v-model:show="showActionSheet" :actions="allSolutionIds" @select="handleSelect" /> -->
    </div>
  </van-sticky>

  <van-popup class="L-text-align-center" round v-model:show="showActionSheet" position="top" :style="{ height: '50%'}">
    <div v-for="(item,index) in allSolutionIds" :key="index" style="margin:20px auto" @click="handleSelect(item)">{{item.label}}</div>
  </van-popup>

  <van-popup v-model:show="showConditionPopup" position="top">

    <FormInput v-for="(item,index) in conditionEle" :key="index" :formItem="item" @handleChange="handleChange"></FormInput>

    <div style="margin:10px auto;text-align: center;">
      <van-button type="primary" style="width: 90%;" @click="handleSearch">搜索</van-button>
    </div>
  </van-popup>

  <template v-for="(item,index) in mainData" :key="index">

    <div v-if="item.sname==='quicknavigation'" class="home-container">
      <Quicknavigation :itemdata="item"></Quicknavigation>
    </div>

    <div v-if="item.sname==='diamond'" class="home-container">
      <Diamond :itemdata="item"></Diamond>

    </div>

    <div v-if="item.sname==='complete'" class="home-container">
      <Complete :itemdata="item"></Complete>
    </div>

    <div v-if="item.sname==='table' && item.type==='排序表格' " class="home-container">
      <RankTable :itemdata="item"></RankTable>
    </div>

    <div v-if="item.sname==='piechart'" class="home-container">
      <PieChart :itemdata="item"></PieChart>
    </div>

    <div v-if="item.sname==='alert'" class="home-container">
      <Alert :itemdata="item"></Alert>
    </div>

    <div v-if="item.sname==='rank'" class="home-container">
      <RankChart :itemdata="item"></RankChart>
    </div>

    <div v-if="item.sname==='everymonth'" class="home-container">
      <EveryMonth :itemdata="item"></EveryMonth>
    </div>

    <div v-if="item.sname==='ranking'" class="home-container">
      <Ranking :itemdata="item"></Ranking>
    </div>

    <div v-if="item.sname==='linebarchart'" class="home-container">
      <LineBarChart :itemdata="item"></LineBarChart>
    </div>

    <div v-if="item.sname==='table' && item.type!=='排序表格'" class="home-container">
      <Table :itemdata="item"></Table>
    </div>

  </template>

  <div class="L-bottom-space"></div>
  <Tabbar />
</template>
  
  <script setup lang="ts">
import {
  closeToast,
  showLoadingToast,
  showConfirmDialog,
  showToast,
} from "vant";
import Tabbar from "@/components/common/Tabbar.vue";
import { ref, onMounted, reactive, toRefs, onActivated } from "vue";
import { apiConfigurable } from "@/request/api/api";
import FormInput from "@/components/base/Form/FormInput.vue";


import Quicknavigation from "@/components/base/Home/Quicknavigation.vue";
import Complete from "@/components/base/Home/Complete.vue";
import RankTable from "@/components/base/Home/RankTable.vue";
import PieChart from "@/components/base/Home/PieChart.vue";
import Alert from "@/components/base/Home/Alert.vue";
import RankChart from "@/components/base/Home/RankChart.vue";
import EveryMonth from "@/components/base/Home/EveryMonth.vue";
import Ranking from "@/components/base/Home/Ranking.vue";
import Diamond from "@/components/base/Home/Diamond.vue";
import LineBarChart from "@/components/base/Home/LineBarChart.vue";
import Table from "@/components/base/Home/Table.vue";

const currentTitle = ref("销售数据看板");

const mainData = ref([]);
const allSolutionIds = ref([]);

const currentSolutionId = ref("");
const currentSolutionLabel = ref("");
const conditionMap = ref({});

const showActionSheet = ref(false);
const showConditionPopup = ref(false);

onMounted(() => {
  getData();
});

function getData() {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    duration: 0,
  });
  const params = {
    idsolution: currentSolutionId.value,
  };

  apiConfigurable("homepage.home.do", params).then((res) => {
    if (res.code === 0) {
      mainData.value = res.data.maindata;
      allSolutionIds.value = res.data.allSolutionIds;
      currentSolutionLabel.value = res.data.currentSolutionLabel;
      conditionMap.value = res.data.conditionMap;
      transformNames(conditionMap.value);
      closeToast();
    }
  });
}

// 字段值发生变化
function handleChange(item, value, valuehidden = "") {
  item.value = value;
  if (valuehidden) {
    item.valuehidden = valuehidden;
  }
}
interface solutionItemIF {
  label: string;
  value: string;
}
function handleSelect(item: solutionItemIF) {
  showActionSheet.value = false;
  currentTitle.value = item.label;
  currentSolutionId.value = item.value;
  getData();
}

const conditionObj = ref({});
const conditionEle = ref([]);

interface conditionMapIF {
  [key: string]: string;
}

function transformNames(conditionMap: conditionMapIF) {
  conditionEle.value = [];

  if (Object.keys(conditionMap).length === 0) return;
  let text = "";
  let type = "";
  let data = "";
  Object.keys(conditionMap).forEach((key) => {
    data = conditionMap[key];
    let isEle = false; // 排除隐藏搜索条件
    let refkey = "";
    if (key === "$query(startym)") {
      text = "开始年月";
      type = "date";
      isEle = true;
    } else if (key === "$query(endym)") {
      text = "结束年月";
      type = "date";
      isEle = true;
    } else if (key === "$query(yearmonth)") {
      text = "年月";
      type = "date";
      isEle = true;
    } else if (key === "$query(product)") {
      text = "产品";
      isEle = true;
      type = "ref";
      refkey = "productid";
    } else if (key === "$query(productid)") {
      text = "产品id";
      isEle = false;
    } else if (key === "$query(dep)") {
      text = "部门";
      isEle = true;
      type = "ref";
      refkey = "depid";
    } else if (key === "$query(depid)") {
      text = "部门id";
      isEle = false;
    } else if (key === "$query(startdate)") {
      text = "开始日期";
      type = "date";
      isEle = true;
    } else if (key === "$query(enddate)") {
      text = "结束日期";
      type = "date";
      isEle = true;
    } else if (key === "$query(account)") {
      text = "客户";
      isEle = true;
      type = "ref";
      refkey = "accountid";
    } else if (key === "$query(accountid)") {
      text = "客户id";
      isEle = false;
    } else if (key === "$query(idowner)") {
      text = "业务员";
      isEle = true;
      type = "ref";
      refkey = "idownerid";
      key = "$query(employee)";
    } else if (key === "$query(idownerid)") {
      text = "业务员id";
      isEle = false;
    } else if (key === "$query(sheng)") {
      text = "省份";
      isEle = true;
      type = "ref";
      refkey = "shengid";
    } else if (key === "$query(shengid)") {
      text = "省份id";
      isEle = false;
    }

    // const match = key.match(/\((.*?)\)/);
    // const idObject = match ? match[1] : "";
    // if (key.indexOf("$query") > -1) {
    //   conditionObj.value[idObject] = data;
    // }

    // conditionEle.value.push({
    //   idJoinObject: idObject,
    //   idObject: "",
    //   lCanInput: "1",
    //   lCanOutput: isEle ? "1" : "0",
    //   lMustInput: "0",
    //   sField: refkey,
    //   sRefKey: "",
    //   sFieldRef: "",
    //   sTitle: text,
    //   sUIType: type,
    //   value: "",
    //   valuehidden: "",
    // });

    // if (key === '$query(account)') {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(account)_viewid'], id: conditionMap['$query(account)_objname'], isShow: isEle, refkey: refkey })
    // } else if (key === '$query(idowner)') {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(idowner)_viewid'], id: conditionMap['$query(idowner)_objname'], isShow: isEle, refkey: refkey })
    // } else if (key === '$query(product)') {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(product)_viewid'], id: conditionMap['$query(product)_objname'], isShow: isEle, refkey: refkey })
    // } else if (key === '$query(dep)') {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(dep)_viewid'], id: conditionMap['$query(dep)_objname'], isShow: isEle, refkey: refkey })
    // } else if (key === '$query(sheng)') {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, viewid: conditionMap['$query(sheng)_viewid'], id: conditionMap['$query(sheng)_objname'], isShow: isEle, refkey: refkey })
    // } else {
    //   conditionEle.value.push({ 'title': text, 'data': conditionMap[key], 'type': type, id:res, isShow: isEle, refkey: refkey })
    // }
  });

}

function handleSearch() {
  showConditionPopup.value = false;
  
  getData();
}
</script>
  
  <style scoped>
.L-home-top-row {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: center;
}
.home-container {
  width: 100%;
  padding: 10px;
  background: #fff;
  /* border-bottom:20px solid #f0f2f5 */
}
.homecontainer {
  width: 100%;
  padding: 15px;
  background: #fff;
}
</style>